<sakai-user-photo user-id="{{creatorId}}" profile-popup="on"></sakai-user-photo>
<div class="commons-comment-body">
    <span id="commons-comment-author-name-{{id}}"><a id="commons-author-name-{{id}}" href="javascript:;" class="commons-comment-author-name" data-user-id="{{creatorId}}">{{creatorDisplayName}}</a></span>
    <span id="commons-comment-content-{{id}}" class="commons-comment-content">{{{content}}}</span>
    <div id="commons-comment-options-{{id}}" class="commons-post-options d-block d-sm-flex mt-2">
        <div class="mx-1">
            <a href="javascript:;" id="commons-like-link-{{id}}" class="commons-like-link" data-post-id="{{id}}" >
                <i id="commons-like-icon-{{id}}" class="si si-like"></i>
                {{tr 'like'}}
            </a>
            <a href="javascript://" data-bs-toggle="popover" data-html="true" data-content="" id="commons-likes-count-{{id}}" class="commons-likes-count" data-post-id="{{id}}" >
                (<span id="commons-likes-count-number-{{id}}" data-count="0">0</span>
                <span id="commons-likes-people-{{id}}" >{{tr 'people'}}</span>
                <span id="commons-likes-person-{{id}}" style="display:none;">{{tr 'person'}}</span>)
            </a>
        </div>
        <div class="mt-1 mt-sm-0 mx-1">
            {{#if canEdit}}
            <a href="javascript:;" id="commons-comment-edit-link-{{id}}" class="commons-comment-edit-link" data-comment-id="{{id}}" data-creator-id="{{creatorId}}">{{tr 'edit'}}</a>
            {{/if}}
            {{#if canDelete}}
            <a href="javascript:;" id="commons-comment-delete-link-{{id}}" class="commons-comment-delete-link" data-post-id="{{postId}}" data-comment-id="{{id}}">{{tr 'del'}}</a>
            {{/if}}
        </div>
        <div class="mt-1 mt-sm-0 mx-1">
            <span class="commons-date">{{formattedCreatedDate}}</span>
        </div>
    </div>
</div>
